<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米商城-个人中心</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/stylegd.css">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/web.js" ></script>
	</head>
	<body>
		<div id="app">
	<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="index.html" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="gouwuche.html">购物车</a></div>
					<div class="fr">
						<ul>
							<li><a style="cursor:pointer" v-on:click="jump()" target="_blank">{{omg}}</a></li>
							<li>|</li>
							<li><a href="./register.html" target="_blank" >注册</a></li>
							<li>|</li>
							<li><a href="#top">个人中心</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->
	<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<li v-on:click="search()"><a href="#">全部商品</a></li>
					<li v-on:click="go('小米手机')"><a href="liebiao.html" >小米手机</a></li>
					<li v-on:click="go('红米手机')"><a href="liebiao.html" >红米手机</a></li>
					<li v-on:click="go('笔记本电脑')"><a href="liebiao.html" >笔记本电脑</a></li>
					<li v-on:click="go('电视')"><a href="liebiao.html" >电视</a></li>
					<li v-on:click="go('路由器')"><a href="liebiao.html" >路由器</a></li>
					<li v-on:click="go('智能硬件')"><a href="liebiao.html" >智能硬件</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="" method="post">
					<div class="text fl">
						<input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货">
					</div>
					<div class="submit fl">
						<input type="submit" class="sousuo" value="搜索"/>
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->
<!-- self_info -->
	<div class="grzxbj">
		<div class="selfinfo center">
		<div class="rtcont fr" >
			<div class="table-responsive">			  		
				  <table class="table table-bordered table-condensed">
				  	<thead>
				  	<tr>
				    	<th style="text-align: center;">商品名称</th>
				    	<th style="text-align: center;">商品图片</th>
				    	<th style="text-align: center;">商品数量</th>
				    	<th style="text-align: center;">商品规格</th>
				    	<th style="text-align: center;">商品价格</th>

				    </tr>
				    </thead>
				    <!--
                    	作者：1369724608@qq.com
                    	时间：2018-08-19 <img style="width: 25px; height:25px;" v-bind:src="web_static_server+product.photo"/>
                    	描述：.replace("1",'是').replace('0','否').replace("1",'正常').replace('0','异常')
                    -->
				    <tbody class="table-hover">
				    <tr v-for="product in list">
				    	<td style="text-align: center;line-height: 50px;">{{product.productName}}</td>
				    	<td style="text-align: center;"><img style="width: 50px; height:50px;" v-bind:src='web_photo_server+product.photo'/></td>
				    	<td style="text-align: center;line-height: 50px;">{{product.unit}}</td>
				    	<td style="text-align: center;line-height: 50px;">{{product.standard}}+{{product.productColor}}</td>
				    	<td style="text-align: center;line-height: 50px;">￥{{product.price}}</td>
				    </tr>
				    </tbody>
				  </table>
				</div>
		
			<div style="width: 100%; min-height: 100px;">			
					<div style="width: 100%; height: 100%;">
						<div style=" margin-left: 80px; width: 20%;height: 100%; float: left;">
							<span>收货人</span><input v-model="name11" type="text" style="width: 150px;"/>
						</div>
						<div style="margin-left: 50px; width: 20%;height: 100%; float: left;">
							<span>收货地址</span><input v-model="address11" type="text" style="width: 150px;"/>
						</div>
						<div style="margin-left: 50px; width: 20%;height: 100%; float: left;">
							<span>联系方式</span><input v-model="phone11" type="text" style="width: 150px;"/>
						</div>
						<div style="margin-left: 50px; width: 20%;height: 100%; float: left;">
							<span>备注</span><input type="text" v-model="beizhu11" style="width: 150px;"/>
						</div>
					</div>
			<div class="jiesuandan mt20 center clearfix" style="width:100%; overflow: hidden;" >			
				<div class="jiesuan fr">
					<div class="jiesuanjiage fl">合计（不含运费）：<span>{{totalprice}}.00元</span></div>
					<a href="pay.html"><input class="btn btn-info" style="width: 100px; margin-left: 50px;" class="jsan" type="button" name="jiesuan" value="立即付款"/></a>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

	
		<div class="clear"></div>
		</div>
	</div>
	
	
	
	
<!-- self_info -->

		

		</div>
		<footer class="mt20 center">			
			<div class="mt20">MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：151-3503-4757，本网站所列数据，除特殊说明，所有数据均出自昭平科技实验室测试</div>
		</footer>
		</div>
	</body>
	<script type=" text/javascript">
		window.onload=function(){
		var vue=new Vue({
			
			el:"#app",
			data:{
				list:[],
				web_server:window.web_server,
				web_photo_server:window.web_server_static,
				name11:"",
				phone11:"",
				beizhu11:"",
				address11:"",
				totalprice:'',
			   lmuid:window.sessionStorage.getItem("loginUserid"),
			   uuu:window.sessionStorage.getItem('loginUsername'),
			   omg:'',
			   oId:window.sessionStorage.getItem('orderId'),			   
			},			
			created:function(){
				this.xinxi(),
				this.dengl(),
				this.orderfind()
			},
			methods:{
				dengl:function(){
//						var uuu=window.sessionStorage.getItem('loginUsername');
						if(this.uuu==null){
							this.omg="登录";														
						}else{
								this.omg=this.uuu;
						}													
					},
					jump:function(){
					if(this.uuu!=null){
						window.location.href="self_info.html";
					}else{
						window.location.href="login.html";
					}
				},
				orderfind:function(){
					var self=this;
					//必须要写
					axios.defaults.withCredentials = true;
					axios.get(web_server+"api/order/OrderDetailsServlet",{
						params:{
							'orderId':self.oId,
						}
					})
					.then(function(response){
						var obj=response.data;
						if(obj.status==200){
							self.list=obj.data[0].list;
							self.totalprice=obj.data[0].totalPrice;
							window.sessionStorage.setItem('zj',obj.data[0].totalPrice)							
							window.sessionStorage.setItem('comment',obj.data[0].comment)
						}
					})
			},
					xinxi:function(){
					var self=this;
					//必须要写
					axios.defaults.withCredentials = true;
					axios.get(web_server+"api/user/select",{
						params:{
							'userId':self.lmuid
						}
					})
					.then(function(response){
						var obj=response.data;
						if(obj.status==200){
						self.name11=obj.data[0].userName;
						self.phone11=obj.data[0].userTelphone;
						self.address11=obj.data[0].userAddress;

						}
					})
			},
			
		}	
	})
		}
	</script>	

</html>